<template>
  <div class="grid-connect__body">
    <el-row :gutter="20"
            justify="center"
            type="flex">
      <el-col :span="1"
              name="left">
        <slot name="left"></slot>
      </el-col>
      <el-col :span="17">
        <slot></slot>
      </el-col>
      <el-col :span="5">
        <slot name="right-avatar">
          <div class="right-default__card_avatar"
               v-if="website.visibility">
            <div class="avatar-border">
              <el-avatar :src="website.avatar.url"
                         :size="135"></el-avatar>
            </div>
            <div class="name">{{website.nick_name}}</div>
            <div class="signature"
                 v-if="website.signature">{{website.signature}}</div>
            <div class="contact-master__body"
                 v-if="website.contact">
              <el-button size="medium">联系我</el-button>
            </div>
          </div>
          <divider :width="60"
                   align="center"></divider>
        </slot>
        <div class="cate-cloud__body">
          <h4 class="cate-cloud__body_title">标签云</h4>
          <div class="cate-cloud__content">
            <router-link class="cate-single-link"
                         v-for="(cate,index) in cates"
                         :key="index"
                         :to="{
                name:'search',
                query:{
                  cate: `${cate.id}`
                }
              }">
              <span>{{ cate.name }}</span>
            </router-link>
          </div>
        </div>
        <slot name="right"></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'grid',
  computed: {
    ...mapGetters('home', ['website', 'cates']),
  },
  mounted () {
    if (this.cates.length === 0) {
      this.fetchCates()
    }
  },
  methods: {
    ...mapActions('home', ['fetchCates']),
  }
}
</script>

<style scoped lang="scss">
.grid-connect__body {
  width: 1300px;
  margin: 0 auto;
}
.right-default__card {
  &_avatar {
    display: flex;
    flex: 1;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 0 0;
    // border-bottom: 1px solid #f6f6f6;
    .avatar-border {
      height: 135px;
      border-radius: 50%;
      box-shadow: 0px 0px 2px #45bcf9;
    }
    .signature {
      font-size: 13px;
      color: #adadad;
    }
    .contact-master__body {
    }
    :nth-child(n + 2) {
      margin-top: 10px;
    }
  }
}
.cate-cloud__body {
  display: flex;
  flex-direction: column;
  background: #fff;
  &_title {
    margin-top: 0;
  }
  .cate-cloud__content {
    font-size: 14px;
    .cate-single-link {
      color: #2c3e50;
      display: inline-block;
      text-decoration: none;
      cursor: pointer;
      margin: 8px 4px;
      span {
        padding: 3px 5px;
        border-radius: 3px;
        background-color: #f6f6f6;
      }
    }
  }
}
</style>